<template>
	<div>
		<div class="addBtn" @click="addDesk">
			<button><img src="../assets/images/adddesktop.png?v=2"></button>
		</div>
		<div class="adddesktop_alert" v-show="deskShow">
            <button class="closebtn" @click="closebtn"><img src="../assets/images/login-close.png"></button>
            <div class="content bounceIn">
                <img class="adddesktopbg" src="../assets/images/adddesktopbg.png?v=1">
                <div class="info">
                    <div>将游戏图标添加在桌面</div>
                    <div>下次可更方便的进入游戏哦</div>
                    <div>首次添加到桌面奖励 30<img class="jinbi" src="../assets/images/chongbianniu.png"></div>
                </div>
                <div><button class="collection reward_btn rewarded" v-if="rewardShow">已领取</button><button class="collection adddesktop_btn" @click="callbackfunction()">添加到桌面</button></div>
            </div>
        </div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return {
				deskShow:false,
				rewardShow:false,
			}
		},
		methods:{
			closebtn(){
				this.deskShow = false;
			},
			addDesk(){
				this.deskShow = true;
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/user/hasAddShortcut`,{
					token:this.$store.getters.user.token,
		            uid:this.$store.getters.user.uid
				}).then((response) => {
		              console.log(response)
		              if(response.data == "1"){
		                    this.rewardShow = true;
		               }
		  		})
			},
			callbackfunction(){
				var _that=this;
		        mqq.ui.addShortcut({
		            action: 'web',
		            title: '梦想抓娃娃',
		            icon: 'http://m.mxzhuawawa.com/src/img/logo1.png',
		            url: 'https://h5.qzone.qq.com/app/open/1106718756/home?_proxy=1&_wv=145191',
		            callback(ret){
		                _that.deskShow = false;
		                _that.$jsonp(`${_that.URL_PREFIX}/OpenAPI/v1/user/addShortcut`,{
		                	token:_that.$store.getters.user.token,
		                	uid:_that.$store.getters.user.uid
		                }).then((response) => {
				              console.log(response)
				              if(response.code == '0'){
				              		mqq.ui.showTips({
		                                text: "桌面快捷方式添加成功",
		                                iconMode: 2
		                            })
		                            _that.deskShow = false;
		                            _that.$store.commit("getCoinInfo",parseInt(response.data))
				              }
				  		}).catch((err) => {
				  			console.log("err" + err)
				  		})
		            }
		        })
		        if(this.$store.getters.platform == 2){
		        	setTimeout(() =>{
		        		this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/user/addShortcut`,{
		                	token:_that.$store.getters.user.token,
		                	uid:_that.$store.getters.user.uid
		                }).then((response) => {
				              console.log(response)
				              if(response.code == '0'){
				              		mqq.ui.showTips({
		                                text: "桌面快捷方式添加成功",
		                                iconMode: 2
		                            })
		                            _that.deskShow = false;
		                            _that.$store.commit("getCoinInfo",parseInt(response.data))
				              }
				  		})
		            },2000)
		        }
		    }
		}
	}
</script>

<style scoped>
	.addBtn{position: fixed;bottom:20px;left:0;width:60px;}
	.addBtn button{background:transparent;border: 0;}
	.addBtn img{display: block;width:100%;}

	.adddesktop_alert{position: fixed;top:0;left:0;width:100%;height:100%;z-index:11;background:rgba(0,0,0,0.5);}
	.adddesktop_alert .closebtn{width:40px;height:40px;position: absolute;right:10%;top:20%;background: transparent;border: 0;}
	.adddesktop_alert .content{position:absolute;top:50%;left:10%;margin-top:-150px;text-align: center;width:80%;background:#fff;border-radius: 15px;}
	.adddesktop_alert .adddesktopbg{width:100%;display: block;}
	.adddesktop_alert .info{width:100%;background:#fff;color:#555;font-size:16px;text-align: center;line-height: 35px;padding:10px 0;}
	.adddesktop_alert .info + div{font-size: 0;padding:10px 0;}
	.adddesktop_alert .info > div{padding: 10px 0;}
	.adddesktop_alert .info .jinbi{width:20px;vertical-align: middle;margin-top:-3px;}
	.adddesktop_alert .collection{display: inline-block;padding:5px 15px;border-radius:20px;margin:0 10px;}
	.adddesktop_alert .adddesktop_btn{background:#f6c71b;color:#555;border:0;font-size:16px;}
	.adddesktop_alert .reward_btn{background:#ff6fae;color:#fff;}
	.adddesktop_alert .reward_btn.none{display:none;}
	.adddesktop_alert .reward_btn.rewarded{background:#a9a3a5;}

</style>